<template class="home">
  <!-- 页面顶部 -->
  <div class="home-top">
    <span>首页</span>
    <div class="home-top-icon">
      <img src="../../assets/home/猫咪.png" alt="" @click="js">
      <img src="../../assets/home/照相机.png" alt="" @click="js">
    </div>
  </div>
  <!-- banner -->
  <div class="home-banner">
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="#f7d029"
      :height="200"
    >
      <van-swipe-item v-for="image in lunbo" :key="image.id">
        <img src="https://img2.baidu.com/it/u=4073618939,306656031&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=751" alt="">
      </van-swipe-item>
    </van-swipe>
  </div>
  <!-- 宠物领养 -->
  <div class="home-title">
    <div class="home-title-top">
      <span>宠物领养</span>
      <span class="moer">更多 ></span>
    </div>
    <div class="home-title-bottom">
      <van-swipe
        class="my-swipe"
        indicator-color="white"
        :loop="false"
        :width="180"
        :height="70"
        :show-indicators="false"
      >
        <van-swipe-item v-for="cw in congwu" :key="cw.id">
          <div>
            <img :src="cw.imageUrl" alt="">
          </div>
          <div class="left">
            <div class="top">
              <img src="../../assets/home/地标.png" :alt="cw.id"> {{ cw.address }}
            </div>

            <div class="content">
              {{ cw.name }}
            </div>
            <div class="bottom">
              {{ cw.age !< 12 ? cw.age + '个月' : cw.age/12 + '年' }}
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
  <!-- 视频页 -->
  <div class="video">
    <div class="hander">
      <van-tabs
        v-model:active="active"
        title-inactive-color="#999999"
        title-active-color="#454847"
      >
        <van-tab
          title="最热视频"
          type="card"
        >
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="loadMore"
          >
            <van-row>
              <van-col
                v-for="n in zuire"
                :key="n.id"
                span="24"
              >
                <div class="V_title">
                  <div class="V_top">
                    <img src="../../assets/h1.jpg">
                    <span>坤之大，一锅装不下</span>
                  </div>
                  <span class="text">{{ n.title }}</span>
                  <div class="V_video">
                    <video
                      controls
                      src="https://dcloud-chjh-learning.oss-cn-hangzhou.aliyuncs.com/video/chapter_00.mp4"
                    />
                  </div>
                  <div class="V_bottom">
                    <div class="love" @click="myLike(n)">
                      <van-icon v-show="n.like" name="like-o" />
                      <van-icon
                        v-show="!n.like"
                        name="like"
                        color="red"
                      />{{ n.likeNum }}
                    </div>
                    <div class="comment">
                      <img src="../../assets/home/消息-置灰.png" alt="">
                    </div>
                    <div class="share">
                      <img src="../../assets/home/分享.png" alt="">
                    </div>
                  </div>
                </div>
              </van-col>
            </van-row>
          </van-list>
        </van-tab>
        <van-tab
          title="最新视频"
          line-width="0px"
          type="card"
        >
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="loadMore"
          >
            <van-row>
              <van-col
                v-for="n in zuire"
                :key="n.id"
                span="24"
              >
                <div class="V_title">
                  <div class="V_top">
                    <img src="../../assets/h1.jpg">
                    <span>坤之大，一锅装不下</span>
                  </div>
                  <span class="text">{{ n.title }}</span>
                  <div class="V_video">
                    <video
                      controls
                      src="https://dcloud-chjh-learning.oss-cn-hangzhou.aliyuncs.com/video/chapter_00.mp4"
                    />
                  </div>
                  <div class="V_bottom">
                    <div class="love" @click="myLike(n)">
                      <van-icon v-show="n.like" name="like-o" />
                      <van-icon
                        v-show="!n.like"
                        name="like"
                        color="red"
                      />{{ n.likeNum }}
                    </div>
                    <div class="comment">
                      <img src="../../assets/home/消息-置灰.png" alt="">
                    </div>
                    <div class="share">
                      <img src="../../assets/home/分享.png" alt="">
                    </div>
                  </div>
                </div>
              </van-col>
            </van-row>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { findHomeDeta, findMore } from '../../api/home'

const route = useRouter()

// 页面内跳转
const toY = () => {
  route.push('/kind')
}

// 首次加载数据定义
const lunbo = ref<any[]>([])
const congwu = ref<any[]>([])
const zuire = ref<any[]>([])

const myLike = (n:any) => {
  if (n.like) {
    n.likeNum += 1
    n.like = !n.like
    return
  }
  n.likeNum -= 1
  n.like = !n.like
}
const loadHomeData = async () => {
  const result:any = await findHomeDeta()
  console.log('查询中', result)
  lunbo.value = result.lunbo
  congwu.value = result.congwu
  zuire.value = result.zuire
}
loadHomeData()

const page = ref(1)
const loading = ref(false)
const finished = ref(false)
const loadMore = async () => {
  console.log('正在加载更多')
  const result: any = await findMore({ page: page.value })
  // 将查询到的推荐商品列表数据追加到原数组数据后
  zuire.value = zuire.value.concat(result.list)
  loading.value = false
  finished.value = result.isEnd
  page.value += 1
}
// let ssr:boolean
// // eslint-disable-next-line prefer-const
// ssr = true
// const sr = (a: any) => {
//   console.log(1)
//   // a = !a
// }
const active = ref(0)
const js = () => {
  console.log('我没做')
}
</script>

<style lang="less" scoped>
.home{
  padding-bottom: 30px;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.home-banner {
  padding: 10px;
  border-radius: 5px;
  overflow: hidden;

  img {
    border-radius: 5px;
  }
}

.home-top {
  width: 100%;
  height: 50px;
  background-color: #f5ca2b;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-weight: 700;
}

.home-top .home-top-icon {
  display: flex;
  width: 80px;
  justify-content: space-evenly;
}

.home-top .home-top-icon img {
  width: 20px;
  height: 20px;
  margin: 10px;
}

.home-banner .my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  border-radius: 5px;
  overflow: hidden;
}

.home-title-top {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.home-title-top .moer {
  font-size: 16px;
  font-weight: 500;
  color: #aaaaa8;
}

.home-title .my-swipe .van-swipe-item {
  display: flex;
  justify-content: space-around;
  border: 1px solid #aaaaa8;
  margin-left: 15px;
  padding: 5px;
}

.home-title .home-title-bottom {
  height: 60px;
  font-size: 14px;
  color: #1e2735;
  .left {
    display: flex;
    flex-direction: column;
    // font-size: 16px;
  }
}

.home-title-bottom img {
  margin-top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px pink solid;
}

.home-title-bottom .top {
  display: flex;
  justify-content: flex-end;
}

.home-title-bottom .top img {
  margin-top: 3px;
  width: 15px;
  height: 14px;
  border-radius: none;
  overflow: none;
  border: none;
}

.video{
  padding: 10px;
  margin-top: 10px;
  font-size: 20px;
  color: #aaaaa8;
  .hander {
    .van-tabs{
      margin-top: 10px;
      margin-bottom: 10px;
      border-top:1px solid #d5d5d5;
      border-bottom:1px solid #d5d5d5;
      /deep/.van-tab{
        font-size: 20px;
        border: none;
      }
    }
    .van-list {
    background: #d5d5d5;

    .V_title {
      background: #fff;

      .V_top {
        margin: 0;
        height: 50px;
        font-size: 20px;
        font-weight: 700;
        color: black;
        display: flex;
        align-items: center;

        img {
          height: 40px;
          width: 40px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }

      .text {
        font-size: 16px;
        color: black;
      }

      .V_bottom {
        height: 40px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        border-top: 1px solid #e6e5e5;
        border-bottom: 1px solid #e6e5e5;

        img {
          width: 20px;
          height: 20px;
        }
      }

      .V_video {
        height: auto;
        width: 230px;
        display: block;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .5);
        margin-top: 10px;
        margin-bottom: 10px;
        background: #f0eeef;

        video {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  }

}
</style>
